<template>

  <v-container id="inventoryIndexContainer" fluid class="custom-container bgWhite" align="center"
               v-touch="{ right:()=>swipe('right') }" justify="center">

    <xy-header-top title='入库记录'>
      <v-btn :ripple="false" icon slot="left" small @click="gotoHome">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <v-card flat>
      <div ref="statItemsWrapper" style="height: 400px;">
        <v-card-text style="min-height: 450px">

          <v-simple-table>
            <thead>
            <tr>
              <th class="text-left">物料名称</th>
              <th style="min-width: 110px" class="text-right">剩余库存</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in statItems" :key="index" @click="showInventoryList(item)">
              <td class="text-truncate" style="max-width: 170px">{{ item.materialName }}</td>
              <td class="text-right">{{ item.auditQuantityTotal }}
                <v-icon>iconfont-icon iconxiangyou</v-icon>
              </td>
            </tr>
            </tbody>
          </v-simple-table>
          <xy-scroll-status-bar :scroll-end="statItemIsEnd" :loading="loading"></xy-scroll-status-bar>
        </v-card-text>
      </div>
    </v-card>

    <v-speed-dial v-model="speedDial" direction="top" transition="slide-y-reverse-transition" absolute bottom right>
      <template v-slot:activator>
        <v-btn v-model="speedDial" :color="dataRange.color" dark fab>
          {{dataRange.text}}
        </v-btn>
      </template>
      <v-btn class="fs-12" fab dark small v-for="(item,index) in dateOptions" :key="index" :color="item.color"
             @click="changeDateHandel(item)">{{item.text}}
      </v-btn>
    </v-speed-dial>

  </v-container>

</template>

<script>
    import moment from 'moment';
    import BScroll from 'better-scroll';

    /**
     * 出库列表
     * @author Canaan
     * @date 2019/8/21 9:38.
     */
    export default {
        name: 'inventoryIndex',
        mounted() {
            this.loadData();

            this.statItemScroll = new BScroll(this.$refs.statItemsWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullUpLoad: true,
                pullDownRefresh: true
            });

            this.statItemScroll.on('pullingDown', () => {
                this.reloadData();
            });

            this.statItemScroll.on('pullingUp', () => {
                this.appendStatItem();
            });

        },
        components: {},
        props: {},
        data() {
            return {
                statItemScroll: null,
                speedDial: false,
                dataRange: {
                    text: "今",
                    color: "#ff9859"
                },
                dateOptions: [{
                    text: "今",
                    color: "#ff9859"
                }, {
                    text: "周",
                    color: "#FF6E40"
                }, {
                    text: "月",
                    color: "#D84315"
                }],
                statItems: [],
                pageNo: 1,
                statItemIsEnd: false,
                limit: 10,
                loading: false
            }
        },
        computed: {},
        methods: {
            gotoHome() {
                this.$router.push('/');
            },
            swipe(cmd) {
                // switch (cmd) {
                //     case 'right':
                //         this.gotoHome();
                //         break;
                // }
            },
            changeDateHandel(item) {
                if (this.dataRange.text === item.text) {
                    return;
                }
                this.dataRange = item;
                this.pageNo = 1;
                this.statItemIsEnd = false;
                this.statItems = [];
                this.loadData().then(() => {
                    this.statItemScroll.refresh();
                })
            },
            showInventoryList(obj) {
                if (!obj || !obj.materialId) {
                    return;
                }
                this.$router.push({
                    name: 'inventoryList',
                    query: {
                        materialId: obj.materialId,
                        materialName: obj.materialName
                    }
                });
            },
            appendStatItem() {
                this.pageNo = this.pageNo + 1;
                this.loadData()
                    .then(() => {
                        this.statItemScroll.refresh();
                        this.statItemScroll.finishPullUp();
                    });
            },
            reloadData() {
                this.pageNo = 1;
                this.loading = false;
                this.statItemIsEnd = false;
                this.statItems = [];
                this.loadData()
                    .then(() => {
                        this.statItemScroll.refresh();
                        this.statItemScroll.finishPullDown();
                    });
            },
            loadData() {
                if (this.statItemIsEnd || this.loading) {
                    return new Promise((resolve) => {
                        resolve(null);
                    });
                }
                let beginDate = null;
                switch (this.dataRange.text) {
                    case "今":
                        beginDate = moment(moment().format('YYYY-MM-DD')).valueOf();
                        break;
                    case "周":
                        beginDate = moment().subtract(6, 'days').valueOf();
                        break;
                    case "月":
                        beginDate = moment().subtract(30, 'days').valueOf();
                        break;
                    default:
                        throw "未知的类型：" + this.dataRange.text;
                }
                this.loading = true;
                return this.$ajax.get('inventory/material_stat', {
                    params: {
                        pageNo: this.pageNo,
                        limit: this.limit,
                        beginDate: beginDate,
                        endDate: moment().valueOf()
                    }
                }).then(res => {
                    this.loading = false;
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return res;
                    }

                    this.statItemIsEnd = !res.data || res.data.length < this.limit;
                    this.statItems = this.statItems.concat(res.data);
                    return res;
                })
            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .bgWhite {
    background: #fff;
  }
</style>
